<template>
  <div class="list-wrap">
    <div class="top d-flex">
      <h2>{{ title }}</h2>
      <v-divider
        class="mx-4" 
        vertical
        style="height: 40px"
      />
      <m-filter :data="filterData" />
    </div>
    <div class="actions d-flex mt-3">
      <v-btn
        depressed
        color="primary"
        class="mr-2"
      >
        Add Customer
      </v-btn>
      <m-btn-select
        btn-text="Actions"
        :items="actions"
        @click="onClickItem"
      />
      <v-btn
        depressed
        outlined
        color="primary"
        class="ml-2"
      >
        Export to csv
      </v-btn>
    </div>

    <v-data-table
      :headers="headers"
      :items="data"
      :show-select="showSelect"
      :single-select="singleSelect"
      class="mt-4"
    >
      <template v-slot:item.calories="{ item }">
        <v-chip
          :color="getColor(item.calories)"
          dark
        >
          {{ item.calories }}
        </v-chip>
      </template>
    </v-data-table>
  </div>
</template>

<script lang="ts">
import MBtnSelect from '@components/BtnSelect/index.vue'
import MFilter from '@components/Filter/index.vue'

interface ItemData {
	value: number,
	title: string
}

export default {
  name: 'List',
	components: { MBtnSelect, MFilter },
  props: {
    title: {
			type: String,
			default: 'xxx'
		},
		actions: {
			type: Array,
			default: () => []
		},
		headers: {
			type: Array,
			default: () => []
		},
		data: {
			type: Array,
			default: () =>[]
		},
		singleSelect: {
			type: Boolean,
			default: false
		},
		showSelect: {
			type: Boolean,
			default: true
    },
    filterData: {
      type: Array,
      default: () => []
    }
  },
	mounted () {
		console.log(this.data)
	},
	methods: {
		onClickItem (item: ItemData) {
			console.log(item)
		},
		getColor (calories:number) {
      if (calories > 400) return 'red'
      else if (calories > 200) return 'orange'
      else return 'green'
    },
	}
}
</script>

